---
title: Link
description: Used to provide accessible navigation
links:
  source: components/link
  storybook: components-link--basic
  recipe: link
---

<ExampleTabs name="link-basic" />

## Usage

```jsx
import { Link } from "@chakra-ui/react"
```

```jsx
<Link href="...">Click here</Link>
```

## Examples

### Variants

Use the `variant` prop to change the appearance of the `Link` component

<ExampleTabs name="link-with-variants" />

### Within Text

Use `Link` within a text to create a hyperlink

<ExampleTabs name="link-within-text" />

### External

Add an external link icon to the `Link` component

<ExampleTabs name="link-with-external" />

### Next.js

Compose `Link` with Next.js `Link` component using the `asChild` prop

```jsx
import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"

const Demo = () => {
  return (
    <ChakraLink asChild>
      <NextLink href="/about">Click here</NextLink>
    </ChakraLink>
  )
}
```

## Props

<PropTable component="Link" part="Link" />
